let cCxt, ow, oh, color, count = 88,
    timer, oCxt, audioSrc, analyser, uint8Array,
    jds = document.querySelector(".jds"), polyline = jds.querySelector("polyline"), jdsW, jdsH, jdsLength,
    arr = ["嘉宾", "必杀技", "天元", "弥天", "哭泣站台", "孤勇者", "骄傲的少年(2017版)", "火花", "极乐净土", "惊涛落日", "闹海", "Pacific Rim",
        "沉默是金", "那个男孩", "在惊涛骇浪里", "The Nights(Original Mix)", "Themes", "名探偵コナン メインテーマ(絶海の探偵ヴァージョン)",
        "江南style", "克罗地亚狂想曲", "Brave Heart", "Butter-Fly", "I Must Come Back", "一路生花", "自娱自乐", "雅俗共赏", "我的天空",
        "天外来物", "铁血丹心", "红日", "我不愿让你一个人", "高飞", "裂缝中的阳光", "裹着心的光", "黑夜问白天", "浪漫血液", "交换余生",],
    i = 0;

//播放封装 开始播放后音量逐渐变大到1
function play() {
    audio.play();
    timer = setInterval(() => {
        let v = (audio.volume + 0.01).toFixed(2);
        audio.volume = v;
        if (audio.volume >= 1) {
            clearInterval(timer);
            timer = null;
        }
    }, 10);
}
//暂停封装 音量逐渐变小到0后再暂停
function pause() {
    timer = setInterval(() => {
        let v = (audio.volume - 0.01).toFixed(2);
        audio.volume = v;
        if (audio.volume <= 0) {
            clearInterval(timer);
            timer = null;
            audio.pause();
        }
    }, 10);
}

/* 上一首 */
function prev(e) {
    console.log("上一首");
    if (i == 0) { i = arr.length - 1; } else { i--; }
    audio.src = `http://mp3.sxl.show/${arr[i]}.mp3`;
    if (timer) {
        clearInterval(timer);
        timer = null;
    }
    audio.volume = 0;
    play();
    e.stopPropagation();
}
/* 下一首 */
function next(e) {
    console.log("下一首");
    if (i >= arr.length - 1) { i = 0; } else { i++; }

    audio.src = `http://mp3.sxl.show/${arr[i]}.mp3`;
    if (timer) {
        clearInterval(timer);
        timer = null;
    }
    audio.volume = 0;
    play();
    e.stopPropagation();
}

/* 左右切歌按钮点击 */
left.onclick = prev;
right.onclick = next;

/* 音乐可播放 */
audio.oncanplay = function () {
    document.title = arr[i];
    listchange(i);
};

/* 播放结束 */
audio.onended = next
/* 播放进度更新 */
audio.ontimeupdate = function () {
    let timeLength = (audio.currentTime / audio.duration) * jdsLength; // 当前进度百分比

    /* timeLength会出现NAN的情况 */
    if (!timeLength) {
        polyline.setAttribute('points', `3,3 ${jdsW},3 ${jdsW},${jdsH} 3,${jdsH} 3,3`)
        return
    }
    /* 矩形进度条绘制 */
    if (timeLength < jdsW) {
        polyline.setAttribute('points', `3,3 ${timeLength},3`)
    } else if (timeLength < jdsW + jdsH) {
        polyline.setAttribute('points', `3,3 ${jdsW},3 ${jdsW},${timeLength - jdsW}`)
    } else if (timeLength < jdsW * 2 + jdsH) {
        polyline.setAttribute('points', `3,3 ${jdsW},3 ${jdsW},${jdsH} ${jdsLength - timeLength - jdsH},${jdsH}`)
    } else {
        polyline.setAttribute('points', `3,3 ${jdsW},3 ${jdsW},${jdsH} 3,${jdsH} 3,${jdsLength - timeLength}`)
    }
};


/* 窗口大小变化 重新绘制画布不上下文 响应式 */
function resize() {
    //初始化canvas
    cCxt = canvas.getContext("2d");
    ow = canvas.width = window.innerWidth;
    oh = canvas.height = window.innerHeight;
    //cnavas线性渐变 参数：1，2 开始x y坐标 3，4 结束x y坐标
    color = cCxt.createLinearGradient(ow / 2, oh / 2 - 30, ow / 2, oh - 100);
    color.addColorStop(0, "#07c491");

    /* 计算音乐波图条数量 占屏幕宽度的60% */
    count = Math.floor(ow * 0.6 / 2 / 7)
    console.log(count)


    /* 获取矩形进度条相关值 */
    jdsW = jds.width.animVal.value - 6 | 1
    jdsH = jds.height.animVal.value - 6 | 1
    jdsLength = (jdsW + jdsH) * 2
    polyline.setAttribute('points', `3,3 ${jdsW},3 ${jdsW},${jdsH} 3,${jdsH} 3,3`)
}
resize();
window.onresize = resize;

/* 键盘事件 点击事件 获取新音源 处理音频上下文 */
window.onclick = window.onkeyup = function (e) {
    /* 键盘事件 左右键切歌 空格键播放/暂停 */
    if (e.type == "keyup") {
        console.log("按键序号:" + e.keyCode);
        if (e.keyCode == 37) {
            left.click();
        }
        if (e.keyCode == 39) {
            right.click();
        }
        if (e.keyCode != 32) {
            return;
        }
    }

    /* 非点击页面 切换播放暂停 */
    if (audio.src) {
        if (audio.paused && !timer) {
            play();
        } else {
            if (timer) {
                clearInterval(timer);
                timer = null;
                play();
                return;
            }
            pause();
        }
    }

    if (oCxt) return;

    /* 首次点击页面 */
    document.querySelectorAll(".hide").forEach((item) => item.classList.remove("hide"))
    clickMe.classList.add("hide")
    audio.src = `http://mp3.sxl.show/${arr[i]}.mp3`;
    audio.play();

    AudioConTextInit()
};


//根据数据动态绘制
function draw() {
    //将当前的频率数据复制到传入的无符号字节数组中 做到实时连接
    analyser.getByteFrequencyData(uint8Array);
    //自定义获取数组里面数据的频步
    let step = Math.round(uint8Array.length / count);
    cCxt.clearRect(0, 0, ow, oh);
    for (let i = 0; i < count; i++) {
        let audioHeight = uint8Array[step * i];
        cCxt.fillStyle = color;
        /* 矩形绘制 x,y,w,h */
        cCxt.fillRect(ow / 2 + i * 10, oh / 2, 7, -audioHeight);
        cCxt.fillRect(ow / 2 - i * 10, oh / 2, 7, -audioHeight);
        cCxt.fillRect(ow / 2 + i * 10, oh / 2, 7, audioHeight);
        cCxt.fillRect(ow / 2 - i * 10, oh / 2, 7, audioHeight);
    }

    window.requestAnimationFrame(draw);
}

//音频上下文对象初始化
function AudioConTextInit() {
    oCxt = new AudioContext({ latencyHint: "balanced" }); //创建音频上下文对象
    audioSrc = oCxt.createMediaElementSource(audio); //创建媒体源
    analyser = oCxt.createAnalyser(); //创建分析机
    audioSrc.connect(analyser); //媒体源与分析机连接
    analyser.connect(oCxt.destination); //分析机与输出设备连接

    //analyserNode提供了实时频率以及时间域的分析信息 允许获取获取实时数据 并进行音频可视化
    //analyserNode的fftSize属性：无符号长整型的值 用于确定频域的FFT(快速傅里叶变换)
    //fftSize属性值是从32位到32768范围内的2的非零幂 默认值是2048
    //根据分析音频的数据去获取音频频次 决定音频图的高度
    //放在与音频频次等长的Uint8Array
    //Uint8Array 8位无符号字节数组 默认值是1024
    //缓冲区 进行数据的缓冲处理 把数据转换成二进制数据

    uint8Array = new Uint8Array(analyser.frequencyBinCount);
    /* 调用绘制函数 */
    draw();
}


/* 歌曲列表 */
let mList = document.querySelector(".mList")

arr.forEach((item, index) => {
    let li = document.createElement("li")
    li.innerText = item
    mList.appendChild(li)
})

/* 列表变化 */
function listchange(i) {
    let w = 0
    mList.querySelectorAll("li").forEach((item, index) => {
        item.classList.remove("active");
        if (index === i) {
            item.classList.add("active");
            w += (item.clientWidth / 2)
        }
        (index < i) && (w += item.clientWidth + 16)
    })
    mList.style.transform = `translateX(${mList.clientWidth - w}px)`;
}

mList.onclick = function (e) {
    (arr.indexOf(e.target.innerText) !== -1) && (i = arr.indexOf(e.target.innerText))

    audio.src = `http://mp3.sxl.show/${arr[i]}.mp3`;
    if (timer) {
        clearInterval(timer);
        timer = null;
    }
    audio.volume = 0;
    play();

    e.stopPropagation();
}